<template>
  <view class="container">
    <swiper
      :vertical="true"
      :autoplay="true"
      interval="3000"
      duration="500"
      circular="true"
      class="swiper"
    >
      <swiper-item
        v-for="(item, index) in options"
        :key="index"
        class="swiper-item"
      >
        <view class="swiper-content">
          <text class="explain-text">{{ item.text }}</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .swiper {
    width: 100%;
    height: 50rpx;
    .swiper-item {
      display: flex;
      // justify-content: center;
      align-items: center;
      .swiper-content {
        display: flex;
        flex-direction: column;
        // align-items: center;
        .explain-text {
          font-size: 24rpx;
          color: #71c383;
        }
      }
    }
  }
}
</style>
